---
title: Installation d'Astro avec l'ILC automatique
description: "Comment installer Astro avec NPM, PNPM, ou Yarn via l'outil de création create-astro inclus dans l'ILC."
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'



Prêt à installer Astro ? Suivez ce guide pour utiliser la CLI `create astro` pour commencer.

:::note[Vous préférez installer Astro manuellement ?]
Lisez plutôt notre [guide d'installation manuelle étape par étape](/fr/install/manual/) à la place.
:::
#### Prérequis

- **Node.js** - version `v18.14.1` ou supérieure.
- **Éditeur de code** - Nous recommandons [VS Code](https://code.visualstudio.com/) avec notre [extension officielle Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Interface de ligne de commande** - Astro est accessible via son interface par ligne de commande (CLI).

#### Installation

`create-astro` est le moyen le plus rapide pour démarrer un nouveau projet Astro à partir de zéro. Il vous guidera lors de chaque étape d'installation de votre nouveau projet Astro. Il vous permet de choisir entre différents templates de démarrage ou fournir le votre  en utilisant l'argument `--template`.

:::tip[Aperçus en ligne]
Vous préférez essayer Astro dans votre navigateur ? Visitez [astro.new](https://astro.new/) pour naviguer entre nos différents templates de démarrage et démarrer un nouveau projet Astro sans jamais quitter votre navigateur.
:::

## 1. Utiliser l'assistant d'installation

Exécutez la commande suivante dans votre terminal pour démarrer notre assistant d'installation pratique :

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # créer un nouveau projet avec npm
  npm create astro@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # créer un nouveau projet avec pnpm
  pnpm create astro@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # créer un nouveau projet avec yarn
  yarn create astro
  ```
  </Fragment>
</PackageManagerTabs>

Vous pouvez exécuter `create astro` n'importe où sur votre machine, il n'est donc pas nécessaire de créer un nouveau répertoire vide pour votre projet avant de commencer. Si vous n'avez pas encore de répertoire vide pour votre nouveau projet, l'assistant en créera automatiquement un pour vous.

Si tout se passe bien, vous devriez voir un message "Ready for liftoff!" suivi de quelques "Étapes suivantes". Exécutez `cd` vers votre nouveau répertoire pour commencer à utiliser Astro.

Si vous avez manqué l'étape `npm install` durant l'assistant `create-astro`, veuillez vous assurer d'installer les dépendances avant de continuer.

## 2. Lancer Astro ✨

Avec Astro, vous disposez d'un serveur de développement intégré qui regroupe toutes les fonctionnalités nécessaires pour la réalisation de votre projet. La commande `astro dev` démarrera le serveur de développement local pour que vous puissiez voir votre nouveau site web en action pour la toute première fois.

Chaque modèle de départ est livré avec un script préconfiguré qui exécutera `astro dev` pour vous. Utilisez votre gestionnaire de paquets préféré pour exécuter cette commande et démarrer le serveur de développement d'Astro.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


Si tout se passe comme prévu, Astro devrait maintenant être en train de faire tourner votre projet à l'addresse [http://localhost:4321/](http://localhost:4321/) !

Astro va également suivre les modifications de fichiers dans le répertoire `src/`, vous n'aurez donc pas besoin de redémarrer le serveur à chaque fois que vous apporterez des modifications au cours du développement.

Lorsque vous visualisez votre site dans le navigateur, vous avez accès à la [boîte à outil de dev d'Astro](/fr/guides/dev-toolbar/). Au fur et à mesure de la construction, elle vous aidera à inspecter vos [îlots](/fr/concepts/islands/), à repérer les problèmes d'accessibilité, et bien d'autres choses encore.

Si vous n'arrivez pas à ouvrir votre projet dans le navigateur, revenez au terminal où vous avez lancé le script `dev` pour voir ce qui a mal tourné, ou si votre projet est servi sur une url différente que celle mentionnée ci-dessus.

## Modèles de démarrage

Vous pouvez également démarrer un nouveau projet astro basé sur un [exemple officiel](https://github.com/withastro/astro/tree/main/examples) ou sur la branche `main` de n'importe quel dépôt GitHub en passant un argument `--template` à la commande `create astro`.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # créer un nouveau projet avec un exemple officiel
  npm create astro@latest -- --template <example-name>

  # créer un nouveau projet basé sur la branche principale d'un dépôt GitHub
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # créer un nouveau projet avec un exemple officiel
  pnpm create astro@latest --template <example-name>
  
  # créer un nouveau projet basé sur la branche principale d'un dépôt GitHub
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # créer un nouveau projet avec un exemple officiel
  yarn create astro --template <example-name>
  
  # créer un nouveau projet basé sur la branche principale d'un dépôt GitHub
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

Par défaut, cette commande utilisera la branche `main` du référentiel de modèles. Pour utiliser un nom de branche différent, passez-le dans l'argument `--template` : `<github-username>/<github-repo>#<branch>`.

Explorez notre [galerie de thèmes et de modèles de démarrage](https://astro.build/themes/) où vous pouvez parcourir des thèmes pour des blogs, des portfolios, de la documentation, des landing page, et plus encore ! Ou, [recherchez sur GitHub](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories) pour encore plus de projets de démarrage.

## Étapes Suivantes

Bravo ! Vous êtes maintenant prêt à développer avec Astro ! 🥳

Voici quelques sujets que nous vous recommandons d'explorer ensuite. Vous pouvez les lire dans n'importe quel ordre. Vous pouvez même quitter notre documentation pour un moment et aller jouer dans votre nouveau codebase de projet Astro, revenant ici chaque fois que vous rencontrez des problèmes ou avez des questions.

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard
    title="Comprenez votre base de code"
    description="Pour en savoir plus sur la structure des fichiers d'Astro, consultez notre guide sur la structure du projet."
    href="/fr/basics/project-structure/"
  />
  <LinkCard
    title="Ajouter un framework"
    description="Étendez Astro avec le support de React, Svelte, Tailwind et plus encore dans notre guide des intégrations."
    href="/fr/guides/integrations-guide/"
  />
  <LinkCard
    title="Déployez votre site"
    description="Apprenez à construire et à déployer un projet Astro sur le web dans notre guide Déploiement."
    href="/fr/guides/deploy/"
  />
</CardGrid>
